<template>
  <div class="homeSwiper">
    <van-search v-model="search" placeholder="请输入搜索关键词" shape="round" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      
      <van-swipe-item v-for="item in bannerData" :key="item.id">
        <img :src="item.picUrl" alt="">
      </van-swipe-item>

    </van-swipe>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "HomeSwiper",
  data() {
    return {
      search: "",
      bannerData: [],
    };
  },
  created() {
    this.getBanner();
  },
  methods: {
    getBanner() {
      axios
        .get("/api/recommend/banner")
        .then(res => {
          console.log(res.data);
          this.bannerData = res.data.data
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.my-swipe .van-swipe-item  img{
  width: 90%;
  border-radius: 1rem;
  
}
</style>
